<!--<template>-->
<!--  <div :class="className" :style="{height:height,width:width}" />-->
<!--</template>-->

<!--<script>-->
<!--import echarts from 'echarts'-->
<!--require('echarts/theme/macarons') // echarts theme-->
<!--import resize from './mixins/resize'-->

<!--export default {-->
<!--  mixins: [resize],-->
<!--  props: {-->
<!--    className: {-->
<!--      type: String,-->
<!--      default: 'chart'-->
<!--    },-->
<!--    width: {-->
<!--      type: String,-->
<!--      default: '100%'-->
<!--    },-->
<!--    height: {-->
<!--      type: String,-->
<!--      default: '300px'-->
<!--    }-->
<!--  },-->
<!--  data() {-->
<!--    return {-->
<!--      chart: null-->
<!--    }-->
<!--  },-->
<!--  mounted() {-->
<!--    this.$nextTick(() => {-->
<!--      this.initChart()-->
<!--    })-->
<!--  },-->
<!--  beforeDestroy() {-->
<!--    if (!this.chart) {-->
<!--      return-->
<!--    }-->
<!--    this.chart.dispose()-->
<!--    this.chart = null-->
<!--  },-->
<!--  methods: {-->
<!--    initChart() {-->
<!--      this.chart = echarts.init(this.$el, 'macarons')-->

<!--      this.chart.setOption({-->
<!--        tooltip: {-->
<!--          trigger: 'item',-->
<!--          formatter: '{a} <br/>{b} : {c} ({d}%)'-->
<!--        },-->
<!--        legend: {-->
<!--          left: 'center',-->
<!--          bottom: '10',-->
<!--          data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']-->
<!--        },-->
<!--        series: [-->
<!--          {-->
<!--            name: 'WEEKLY WRITE ARTICLES',-->
<!--            type: 'pie',-->
<!--            roseType: 'radius',-->
<!--            radius: [15, 95],-->
<!--            center: ['50%', '38%'],-->
<!--            data: [-->
<!--              { value: 320, name: 'Industries' },-->
<!--              { value: 240, name: 'Technology' },-->
<!--              { value: 149, name: 'Forex' },-->
<!--              { value: 100, name: 'Gold' },-->
<!--              { value: 59, name: 'Forecasts' }-->
<!--            ],-->
<!--            animationEasing: 'cubicInOut',-->
<!--            animationDuration: 2600-->
<!--          }-->
<!--        ]-->
<!--      })-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->
